<template>
  <VmaFrameMain title="demo">
    <div class="flex flex-column">
      <div class="flex">
        <a-form-model layout="inline"
                      @submit.native.prevent>
          <a-form-model-item label="名称：">
            <a-input placeholder="请输入名称"
                     allow-clear
                     v-model.trim="params.name"
                     @pressEnter="search"
                     :maxLength="20"/>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary"
                      @click="search()">查询
            </a-button>
            <a-button @click="clearSearch()">清空</a-button>
          </a-form-model-item>
        </a-form-model>
        <div class="flex-r">
          <a-button type="primary"
                    @click="showForm()">创建
          </a-button>
        </div>
      </div>
      <VmaFixedTable class="flex-1 mt-10"
                     :data-source="table.list">
        <a-table-column title="ID"
                        data-index="id"/>
        <a-table-column title="名称"
                        data-index="name"/>
        <a-table-column title="创建时间">
          <template slot-scope="scope">
            {{fmt.date(scope.createTime)}}
          </template>
        </a-table-column>
        <a-table-column title="操作"
                        width="300px">
          <template slot-scope="scope">
            <a-button type="link"
                      size="small"
                      @click="showForm(scope)">编辑
            </a-button>
            <a-button type="link"
                      @click="showDel(scope.id)"
                      size="small">删除
            </a-button>
          </template>
        </a-table-column>
      </VmaFixedTable>
      <VmaPagination :total="pageData.total"
                     :current="params.current"
                     :pageSize="params.size"
                     @change="pageAdaptor"/>

      <a-modal :title="form.entity.id ? '编辑' : '添加'"
               width="450px"
               v-model="form.show"
               :maskClosable="false"
               :footer="null">
        <Form v-if="form.show"
              :dataProp="form.entity"
              @submit="afterSubmitForm"
              @cancel="cancelForm"/>
      </a-modal>
    </div>
  </VmaFrameMain>
</template>
<script lang="ts">
  import { Component } from 'vue-property-decorator'
  import { mixins } from 'vue-class-component'
  import IndexMixin from '@/mixins/src/indexMixin'
  import Form from './form.vue'

  @Component({
    components: {
      Form
    }
  })
  export default class Demo extends mixins(IndexMixin) {

    protected getFeignService() {
      return ''
    }

  }
</script>
